<template>
	<div class="content">
		<div class="tab_box">
			<u-tabs
				:list="list1" 
				@click="clickTab"
				:activeStyle="{
					color: '#23AC39',
					fontSize:'30rpx',
					fontWeight: 500
				}"
				:inactiveStyle="{
					color: '#999999',
					fontSize:'30rpx',
					fontWeight: 500
				}"
				lineColor="#23AC39"
			></u-tabs>
		</div>
		<div class="text_box">
			<div class="text" v-if="!tabIndex">
				<p>1、付款方付款到平台;</p>
				<p>2、申请收(全/部分)款，另一方点击确认即成功收款;</p>
				<p>3、申请退(全/部分)款，另一方点击确认即成功退款;</p>
				<p>4、交易产生分歧影响收款或退款，由平台客服协调处理;避免因直接付款给对方，遭骗或退款难的窘境!</p>
				<p>建议双方合作沟通过程尽量以文字描述!</p>
			</div>
			<div class="text" v-if="tabIndex == 1">
				<p>1、正常交易 0 服务费;</p>
				<p>2、倘若双方产生分歧申请平台客服解决，平台将收取担保金额5%的服务费。</p>
			</div>
			<div class="text" v-if="tabIndex == 2">
				<p>1、平台不对该笔担保金，属于定金、尾款或其它属性进行甄别;;</p>
				<p>2、平台仅对该笔担保金的安全进行保障。</p>
			</div>
			<p class="anniu">担保交易</p>
		</div>
		<div class="list_box">
			<div class="tab">
				<p class="on">担保中</p>
				<p>已完成</p>
			</div>
			<div class="list">
				
			</div>
			<div class="no_data">
				<img src="/static/no-data.png" alt="">
				<p>暂无相关记录</p>
			</div>
		</div>
		
		<div class="float_box">
			<p>奖励</p>
			<p>规则</p>
		</div>
	</div>
</template>

<script>
	export default {
		options: {
            styleIsolation: 'shared'
        },
		data() {
			return {
				list1: [{
                    name: '交易流程',
                }, {
                    name: '收费规则',
                }, {
                    name: '平台申明'
                }],
				tabIndex:0
			}
		},
		methods: {
			clickTab(item){
				this.tabIndex = item.index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background: #fff;
		.tab_box{
			background: #fff;
			/deep/ .u-tabs__wrapper__nav__item{
				// justify-content: space-around;
				padding: 0 64rpx;
			}
		}
		.text_box{
			background: #f7f7f7;
			padding-bottom:50rpx;
			.text{
				padding:30rpx 30rpx 50rpx 30rpx;
				color:#999999;
				font-size: 26rpx;
				line-height: 46rpx;
			}
		}
		.anniu{
			margin:0 30rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 100rpx;
			background: linear-gradient(270deg, #62CE73 0%, #23AC39 100%);
			text-align: center;
			color:#FFFFFF;
			font-size: 32rpx;
		}
		.list_box{
			padding:45rpx 0;
			.tab{
				width: 440rpx;
				height: 56rpx;
				border-radius: 8rpx;
				background: #EEEEEE;
				margin:0 auto;
				display: flex;
				p{
					width: 50%;
					text-align: center;
					line-height: 56rpx;
					color:#999999;
					font-size: 26rpx;
					&.on{
						background: #08961F;
						color: #FFFFFF;
						border-radius: 4px;
					}
				}
			}
			.no_data{
				text-align: center;
				margin-top:100rpx;
				img{
					width: 320rpx;
					height: 320rpx;
				}
				p{
					font-size: 24rpx;
					color: #999999;
					margin-top:-40rpx;
				}
			}
		}
		.float_box{
			position: fixed;
			right:30rpx;
			bottom:50rpx;
			width: 96rpx;
			height: 96rpx;
			border-radius: 100rpx;
			background: #F9FFFA;
			box-shadow: 0px 0px 20rpx 0px rgba(68, 94, 150, 0.3);
			font-size: 26rpx;
			color: #08961F;
			text-align: center;
			display: flex;
			flex-direction:column;
			justify-content: center;
		}
	}
</style>
